<script setup lang="ts">
import SvgIcon from "@/components/common/SvgIcon.vue";
import BlogTag from "@/components/BlogTag.vue";
import {onMounted, ref} from "vue";
import {categoryApi} from "@/api/blog/categoryApi";
import {tagApi} from "@/api/blog/tagApi";
const tag = ref([] as Tag[])
const category = ref([] as Category[])
const categoriesTotal = ref(0)
const tagsTotal = ref(0)
const tagIndex = ref()
const categoryIndex = ref()
onMounted(()=>{
  getCategory(1, 10)
  getTag(1, 2)
})
function getCategory(page: number, pageSize?: number){
  categoryApi.getCategoryPage(page, pageSize).then(res=>{
    categoriesTotal.value = res.data.total
    category.value = res.data.records
  })
}
function getTag(page: number, pageSize?: number){
  tagApi.getTagPage(page,pageSize).then(res=>{
    tagsTotal.value = res.data.total
    tag.value = res.data.records
  })
}
const moreTag = () =>{
  getTag(1, tagsTotal.value)
}
const moreCategory = () =>{
  getCategory(1,categoriesTotal.value)
}
const emits = defineEmits(['updateArticle'])
const updateArticle = (categoryId?: number,tagId?: number) =>{
  emits('updateArticle', {categoryId: categoryId,tagIds: tagId, current:1, size:10})
}
</script>

<template>
  <div class="article-tag">
    <div class="article-tag-title">
      <span>文章标签</span>
      <div class="more" @click="moreTag">
        查看更多
        <SvgIcon class="icon" icon-class="箭头右"/>
      </div>
    </div>
    <div class="article-tag-item">
      <BlogTag v-for="(item, index) in tag"
               :key="index"
               :text="item.tagName + '  ' + '99+'"
               :color="tagIndex==index?'#EB5C88':undefined"
               @mouseover="tagIndex=index"
               @mouseleave="tagIndex=null"
               @click="updateArticle(undefined, item.id)"/>
    </div>
    <div class="article-tag-title" style="margin-top: 20px;">
      <span>文章分类</span>
      <div class="more" @click="moreCategory">
        查看更多
        <SvgIcon class="icon" icon-class="箭头右"/>
      </div>
    </div>
    <div class="article-tag-item">
      <BlogTag v-for="(item, index) in category"
               :key="index"
               :text="item.categoryName"
               disabled-icon
               :color="categoryIndex==index?'#EB5C88':undefined"
               @mouseover="categoryIndex=index"
               @mouseleave="categoryIndex=null"
               @click="updateArticle(item.id, undefined)"/>
    </div>
  </div>
</template>

<style scoped lang="less">
.article-tag {
  margin-top: 16px;
  background: #ffffff;
  padding: 24px;
  border-radius: 8px;
  .article-tag-title {
    display: flex;
    justify-content: space-between;
    & > span {
      font-size: 20px;
      font-weight: bold;
      letter-spacing: 4px;
      color: #18191C;
    }
    .more{
      display: flex;
      align-items: center;
      font-size: 14px;
      text-align: center;
      color: #666666;
      .icon{
        width: 16px;
        height: 16px;
      }
      &:hover{
        color: #EB5C88;
        cursor: pointer;
      }
    }
  }
  .article-tag-item {
    display: flex;
    flex-wrap: wrap;
    margin-top: 16px;
    .tag {
      margin: 4px;
    }
  }
}
</style>
